<template>
	<basic-container>
		<svg id="svgcanvas" width="100%" height="700" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
		@mousewheel="zoomimg()">
			<g>
  <title>Layer 1</title>
  <rect id="svg_2369" height="427" width="787" y="49.75" x="35.150024" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#fcfcfc"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_2370" y="85.75" x="407.150024" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">二楼</text>
  <rect stroke="#000000" id="svg_2375" height="41.999999" width="757.000074" y="178.75" x="48.149982" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#fcfcfc"/>
  <rect id="svg_2377" height="70.666667" width="41.333333" y="108" x="48.483297" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#fcfcfc"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="18" id="svg_2379" y="146.416667" x="69.149963" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" transform="rotate(-90 69.14843750000004,140.41406250000003) ">胶带</text>
  <rect id="svg_1" height="70.666667" width="41.333333" y="108" x="94.483328" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#bf0000"/>
  <text id="svg_2" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="18" y="150.252604" x="113.151519" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" transform="rotate(-90 113.14843750000001,144.2578125) ">无纺布</text>
  <rect id="svg_3" height="70.666667" width="41.333333" y="108" x="141.483328" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#fcfcfc"/>
  <text id="svg_4" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="18" y="148.244792" x="163.153076" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" transform="rotate(-90 163.14843750000003,142.2421875) ">扎花带</text>
			</g>
		</svg>
	</basic-container>
</template>

<script>
import * as d3 from 'd3';
export default {
	data() {
		return {};
	},
	mounted() {
		// var w = window,
		//     d = document,
		//     e = d.documentElement,
		//     g = d.getElementsByTagName('body')[0],
		//     x = w.innerWidth || e.clientWidth || g.clientWidth,
		//     y = w.innerHeight|| e.clientHeight|| g.clientHeight;
			
		d3.select('#svg_4').text('ssss');
	},
	methods: {
		zoomimg() {
			// 放大缩小
			var svg = d3.select('#svgcanvas');
			svg.call(
				d3.zoom()
					.scaleExtent([0.5, 2])
					.on('zoom', zoom)
			);
			function zoom() {
				d3.select(this)
					.selectAll('g')
					.attr('transform', d3.event.transform);
			}
		}
	}
};
</script>

<style></style>
